const checkBox1 = document.getElementById('checkBox1');
const text1 = document.getElementById('text1');
const checkBox2 = document.getElementById('checkBox2');
const text2 = document.getElementById('text2');

const checkBox3 = document.getElementById('checkBox3');
const text3 = document.getElementById('text3');
const checkBox4 = document.getElementById('checkBox4');
const text4 = document.getElementById('text4');

document.addEventListener('DOMContentLoaded', function () {
    checkBox1.onchange = async () => {
        if (checkBox1.checked) {
            text1.textContent = "已勾选";
            checkBox2.checked = false;
            text2.textContent = "勾选我";
        } else {
            text1.textContent = "勾选我";
        }
    }

    checkBox2.addEventListener('change', function () {
        if (checkBox2.checked) {
            text1.textContent = "勾选我";
            checkBox1.checked = false;
            text2.textContent = "已勾选";
        } else {
            text2.textContent = "勾选我";
        }
    });

    checkBox3.onchange = async () => {
        if (checkBox3.checked) {
            text3.textContent = "已勾选";
            checkBox4.checked = false;
            text4.textContent = "勾选我";
        } else {
            text3.textContent = "勾选我";
        }
    }

    checkBox4.addEventListener('change', function () {
        if (checkBox4.checked) {
            text3.textContent = "勾选我";
            checkBox3.checked = false;
            text4.textContent = "已勾选";
        } else {
            text4.textContent = "勾选我";
        }
    });
});